<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*设置编辑框高度*/
        .w-e-text-container {
            height: 500px !important;
        }
    </style>
    <link rel="stylesheet" href="../js/wangEditor/wangEditor.css">
    <script src="../js/wangEditor/wangEditor.js"></script>
    <script src="../js/jquery-3.4.1.js"></script>

</head>
<body>
<form id="form" method="post">
    <!--
    注意:
        1. 通过这里改变height是无法控制ueditor的高度的, 必须通过w-e-text-container的css类来控制.
    -->
    <div id="contentDiv" style="width: 1000px;"></div>
    <textarea name="content" id="content" style="display:none"></textarea>
</form>
<button id="btn1">获取富文本text内容</button>
<button id="btn2">获取富文本html内容</button>
<button id="btn3">获取表单信息</button>
<button id="btn4">获取文本域内容</button>
<script type="text/javascript">

    var E = window.wangEditor;
    var editor = new E('#contentDiv');
    var $text1 = $('#content');
    editor.customConfig.onchange = function (html) {
        // 监控变化，同步更新富文本内容到 textarea
        $text1.val(html);
    };
    editor.customConfig.uploadImgServer = '/index/public/upload?type=imgFile';	//自定义上传图片（改成自己写的图片上传方法的路径）
    editor.customConfig.uploadFileName = 'imgFile';	//自定义文件名
    editor.customConfig.uploadImgHooks = {
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            var url = result.url;
            insertImg(url)

            // result 必须是一个 JSON 格式字符串！！！否则报错
        }
    };
    editor.customConfig.customAlert = function (info) {	//关闭默认提示信息
        // info 是需要提示的内容
        //alert('自定义提示：' + info)
    };
    // 或者 var editor = new E( document.getElementById('content') )
    editor.create();
    $text1.val(editor.txt.html());

    //获取内容
    $('#btn1').click(function(){
        alert(editor.txt.text());	// 读取 text
    });
    $('#btn2').click(function(){
        alert(editor.txt.html());	// 读取 html
    });
    $('#btn3').click(function(){
        var formData = new FormData($("#form")[0]);
        alert(formData);
    });
    $('#btn4').click(function(){
        alert($('#content').val());	// 读取 html
    });

</script>
</body>
</html>